<template>
  <el-header class="tops" style="height: 40px">
    <router-link v-for="(item,index) in Crumbs.router " :key="index"  :to="item.path" tag="div" class="div">
      <a>{{item.value}}</a>
    </router-link>
    <div class="Crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item v-for="(item,index) in Crumbs.path" :key="index">{{item}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
  
    <div class="out" :style="{position: 'absolute',right:right}">
      <el-button type="primary" icon="icon-qiehuan" circle @click="TogglePages"></el-button>
      <el-button type="primary" icon="icon-tuichu" circle @click="dele"></el-button>
    </div>
  </el-header>
</template>
<script>
export default {
  props: ["Crumbs"],
  props:{
    Crumbs:{
      type:Object,
      default:{}
    },
    right:{
       type:String,
      default:'30px'
    }
  },
  methods: {
    dele() {
      window.sessionStorage.clear();
      this.$message.success("退出成功");
      this.$router.push("/");
    },
    TogglePages() {
      this.$router.push("/steward");
    }
  },

};
</script>
<style scoped>
.el-header {
  width: 100%;
  padding: 0 ;
}
.tops {
  top: 0;
  z-index: 2;
  position: relative;
  width: 100%;
  background-color: #0a7e7e;
}
.tops div {
  float: left;
  width: 149px;
  line-height: 38px;
  border-right: 1px solid #fff;
  text-align: center;
}

.tops a {
  color: #fff;
  font-size: 16px;
}
.div {
}
.tops .out {
  position: absolute;
  right: 60px;
  z-index: 3px;
  border: none;
}
/deep/ .out .el-button.is-circle {
  border-radius: 8px;
  padding: 7px;
  background-color: #28bbac;
  border:none;
}
.tops .Crumbs {
  float: right;
  border: none;
  margin-right: 50%;
}
/deep/ .Crumbs .el-breadcrumb {
  width: 300px;
  border: none;
  margin-left: 300px;
}
/deep/ .Crumbs .el-breadcrumb__inner {
  color: #fff;
}
/deep/ .el-breadcrumb__item:last-child .el-breadcrumb__inner {
  color: #fff;
}
.four {
  border-right: 1px solid #fff;
}
.router-link-active {
  background-color: #28bbac;
}
</style>
